<template>
  <view class="content">
    <view class="tabs">
      <view @tap="tab('1')" :class="showType == 1 ? 'tab act' : 'tab' ">
        <text>每日反馈 </text>
      </view>
      <view @tap="tab('2')" :class="showType == 2 ? 'tab act' : 'tab' ">
        <text>每月反馈</text>
      </view>
      <view @tap="tab('3')" :class="showType == 3 ? 'tab act' : 'tab' ">
        <text>学习进度</text>
      </view>
    </view>
    <view class="searchBox">
      <view class="iptBox">
        <input class="ipt" type="text" placeholder="输入关键词" placeholder-class="iptPla" v-model="info.search_data">
        <view class="searchBtn" @tap="getTeacherStudents()">
          搜索
        </view>
      </view>
    </view>
    <view class="list">
      <view class="item flex f-21  c-66" v-for="(i,k) in list" :key="k" @tap="goStydyDetail(i.id)">
        <view class="itemLeft">
          <view class="header flex">
            <view class="duration" style="width: 40%;">
              <image src="../../static/img/account.png" mode=""></image>
              {{i.username}}<text v-if="i.grade">({{i.grade}})</text>
            </view>
            <view class="">
              {{i.phone}}
            </view>
          </view>
        </view>
        <view class="itemRight">
          <image src="../../static/img/open.png" mode=""></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        show: false,
        info: {
          search_data: '',
        },
        minDate: '',
        list: [],
        showType: 3,
      }
    },
    onLoad() {
      this.getTeacherStudents()
    },
    methods: {
      tab(n) {
        this.showType = n
        if (n == 1) {
          uni.navigateTo({
            url: './day'
          })
        }
        if (n == 2) {
          uni.navigateTo({
            url: './month'
          })
        }
      },
      async getTeacherStudents() {
        const {
          data: res
        } = await uni.$http.post('school/feedback/getTeacherStudents', this.info)
        if (res.code != 1) {
          return this.toast.msg(res.msg)
        }
        this.list = res.data.data
      },
      goStydyDetail(id) {
        uni.navigateTo({
          url: `/pages/feedback/stydyDetail?id=${id}`
        })
      }
    },
  }
</script>

<style lang="scss">
  .content {
    .tabs {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 10rpx;

      .tab {
        width: 184rpx;
        height: 65rpx;
        text-align: center;
        line-height: 65rpx;
        font-size: 28rpx;
        color: #666;
        border-radius: 8rpx;
        background: linear-gradient(90deg, #E5E5E5 0%, #E8E8E8 100%);
        margin-right: 10rpx;
        font-weight: 700
      }

      .act {
        background: linear-gradient(90deg, #AC33C1 0%, #7948EA 100%);
        color: #fff;
      }
    }

    .star {
      color: #D43030;
      margin-left: 11rpx;
    }

    .btns {
      color: #FFFFFF;
      text-align: center;
      line-height: 36rpx;
      font-size: 21rpx;
      margin-left: 293rpx;
      display: flex;

      view {
        width: 80rpx;
        height: 36rpx;
        border-radius: 8rpx;
      }

      .cancel {
        background: #A6A6A6;
        margin-right: 32rpx;
      }

      .confirm {
        background-color: #2A82E4;
      }
    }

    .searchBox {
      width: 670rpx;
      margin: 0 auto;
      padding: 0 20rpx;
      margin-top: 20rpx;

      .timeBox {
        display: flex;
        height: 78rpx;
        line-height: 78rpx;
        align-items: center;
        margin-bottom: 18rpx;

        .time {
          width: 250rpx;
          height: 78rpx;
          border-radius: 10rpx;
          background: #FFFFFF;
          border: 2rpx solid #FCF7F7;
          padding-left: 26rpx;
          color: #666;

          image {
            width: 35rpx;
            height: 35rpx;
            margin-right: 17rpx;
            vertical-align: middle;
          }
        }
      }

      .iptBox {
        display: flex;

        .ipt {
          box-sizing: border-box;
          width: 378rpx;
          height: 66rpx;
          padding-left: 75rpx;
          border: 2rpx solid #FCF7F7;
          border-radius: 10rpx;
          margin-right: auto;
        }

        .iptPla {
          color: #999;
          font-size: 22rpx;
        }

        .searchBtn {
          display: inline-block;
          background: #A6A6A6;
          width: 100rpx;
          height: 66rpx;
          line-height: 66rpx;
          text-align: center;
          border-radius: 10rpx;
          margin-left: 20rpx;
          font-size: 24rpx;
        }

        .addBtn {
          width: 100rpx;
          height: 66rpx;
          line-height: 66rpx;
          text-align: center;
          border-radius: 10rpx;
          font-size: 24rpx;
          background: linear-gradient(90deg, #7948EA 0%, #1AADA4 100%);
          color: #fff;
          margin-left: 14rpx;
        }
      }
    }

    .list {
      width: 698rpx;
      margin: 0 auto;
      margin-top: 20rpx;

      .item {
        margin-bottom: 15rpx;
        width: 698rpx;
        height: 105rpx;
        border-radius: 10rpx;
        background: #FFFFFF;
        border: 2rpx solid #ECECEC;
        color: #999;
        font-size: 24rpx;
        padding: 20rpx 0 20rpx 20rpx;

        .itemLeft {
          width: 600rpx;

          .time {
            color: #333;
            font-weight: 700;
          }

          .redText {
            color: #E33C64;
          }

          .header {
            .duration {
              margin-left: 50rpx;

              image {
                width: 25rpx;
                height: 27rpx;
                margin-right: 20rpx;
              }
            }
          }

        }

        .itemRight {
          margin-left: auto;
          margin-right: 30rpx;
          width: 20rpx;
          transform: rotate(-90deg);

          image {
            width: 18rpx;
            height: 20rpx;
          }
        }
      }
    }
  }
</style>